import type { Options, PtPageJson } from "@/modules/pt-page/types";
import dayjs from "dayjs";

const getPages = (data: Record<string, any>, constraintsMap: Map<string, { title: string; bg: string; local: 1 | 2; }>): PtPageJson['pages'] => {
    // 获取三个位置的option坐标
    const getLocalOptions = (page: 1 | 2 | 3, local: 1 | 2 | 3): Options[] => {
        const pageShaderLocal = {
            // local位置1
            1: {
                // ps页面1
                1: [
                    {
                        y: 338,
                        x: 177,
                        width: 106,
                        height: 31
                    },
                    {
                        y: 338,
                        x: 371,
                        width: 106,
                        height: 31
                    },
                    {
                        y: 163,
                        x: 224,
                        width: 147,
                        height: 147
                    },
                ],
                2: [
                    {
                        y: 140,
                        x: 86,
                        width: 426,
                        height: 232
                    },
                    {
                        y: 527,
                        x: 58,
                        width: 482,
                        height: 130
                    },
                ],
                3: [
                    {
                        y: 114,
                        x: 99,
                        width: 391,
                        height: 202
                    },
                    {
                        y: 504,
                        x: 117,
                        width: 339,
                        height: 115
                    },
                ]
            },
            2: {
                1: [
                    {
                        y: 322,
                        x: 270,
                        width: 104,
                        height: 30
                    },
                    {
                        y: 366,
                        x: 270,
                        width: 104,
                        height: 30
                    },
                    {
                        y: 165,
                        x: 229,
                        width: 138,
                        height: 140
                    }
                ],
                2: [
                    {
                        y: 135,
                        x: 97,
                        width: 421,
                        height: 236
                    },
                    {
                        y: 532,
                        x: 58,
                        width: 482,
                        height: 180
                    },
                ],
                3: [
                    {
                        y: 112,
                        x: 91,
                        width: 404,
                        height: 252
                    },
                    {
                        y: 505,
                        x: 121,
                        width: 343,
                        height: 192
                    },
                ]
            },
            3: {
                1: [
                    {
                        y: 311,
                        x: 177,
                        width: 106,
                        height: 31
                    },
                    {
                        y: 311,
                        x: 371,
                        width: 106,
                        height: 31
                    },
                    {
                        y: 62,
                        x: 225,
                        width: 147,
                        height: 147
                    }
                ],
                2: [
                    {
                        y: 99,
                        x: 99,
                        width: 397,
                        height: 262
                    },
                    {
                        y: 500,
                        x: 58,
                        width: 482,
                        height: 200
                    },
                ],
                3: [
                    {
                        y: 147,
                        x: 139,
                        width: 304,
                        height: 213
                    },
                    {
                        y: 517,
                        x: 121,
                        width: 354,
                        height: 214
                    },
                ]
            }
        };

        return pageShaderLocal[local][page] || [];
    }

    return [
        {
            // 页面标题
            title: "首页",

            // 页面描述信息
            description: "首页",

            // 页面组件配置
            components: [
                {
                    name: 'bg',
                    type: 'image',
                    options: {
                        width: '100%',
                        height: '100%'
                    },
                    value: {
                        src: 'bg1'
                    },
                    render: {
                        fit: "cover",
                        fitVertical: "top"
                    }
                },
                {
                    name: 'studentName',
                    type: 'text',
                    options: getLocalOptions(1, data.homePosition)[0] || {},
                    value: {
                        text: 'student:name'
                    },
                    render: {
                        size: 18,
                        textAlign: 'center',
                        verticalAlign: 'middle'
                    }
                },
                {
                    name: 'studentClass',
                    type: 'text',
                    options: getLocalOptions(1, data.homePosition)[1] || {},
                    value: {
                        text: 'student:className'
                    },
                    render: {
                        size: 18,
                        textAlign: 'center',
                        verticalAlign: 'middle'
                    }
                },
                {
                    name: 'avatar',
                    type: 'image',
                    options: getLocalOptions(1, data.homePosition)[2] || {},
                    value: {
                        src: 'avatar'
                    },
                    render: {
                        fit: 'cover',
                        borderRadius: -1,
                        borderColor: '#fff'
                    }
                },
            ]
        },
        {
            title: "扉页",
            description: "扉页",
            components: [
                {
                    name: 'bg2',
                    type: 'image',
                    options: {
                        width: '100%',
                        height: '100%'
                    },
                    value: {
                        src: 'bg2'
                    },
                    render: {
                        fit: "cover",
                        fitVertical: "top"
                    }
                },
                {
                    name: 'classImage',
                    type: 'image',
                    options: getLocalOptions(2, data.collectivePosition)[0] || {},
                    value: {
                        src: 'classImage'
                    },
                    render: {
                        borderRadius: 6,
                        fit: 'contain',
                        preview: true
                    }
                },
                data.bodyStruct == '1' ? {
                    name: 'body',
                    type: 'table',
                    options: getLocalOptions(2, data.collectivePosition)[1] || {},
                    value: {
                        data: 'bodys',
                        rows: [
                            ['.0', '.1', '.2', '.3', '.4', '.5', '.6', '.7'],
                            ['.date', '.weight', '.height', '.t', '.x', '.y', '.lv', '.rv'],
                            ['.date', '.weight', '.height', '.t', '.x', '.y', '.lv', '.rv'],
                        ]
                    },
                    render: {
                        border: true,
                        borderColor: 'rgb(100 116 139)',
                        // background: '#fff',
                        textAlign: 'center'
                    }
                } : false,
            ]
        },
        ...(data.dailyList || []).map((item: any, index: number) => {
            if (!constraintsMap.has(String(item.scope))) {
                return false;
            }

            const constraint = constraintsMap.get(String(item.scope))!;

            return {
                title: "内容页",
                description: "内容页",
                // mode: 'loop',
                origin: 'base.contents.' + index,
                components: [
                    {
                        name: 'bg',
                        type: 'image',
                        options: {
                            width: '100%',
                            height: '100%'
                        },
                        value: {
                            src: 'bg'
                        },
                        render: {
                            fit: "cover",
                            fitVertical: "top"
                        }
                    },
                    {
                        name: 'title',
                        type: 'text',
                        options: {
                            originAlign: 'center',
                            y: 20,
                            width: '100%',
                            height: 50
                        },
                        value: {
                            text: 'title'
                        },
                        render: {
                            size: 34,
                            textAlign: 'center',
                            verticalAlign: 'middle'
                        }
                    },
                    {
                        name: 'photos',
                        type: 'carousel',
                        options: getLocalOptions(3, data.collectivePosition)[0] || {},
                        value: {
                            data: 'photos'
                        },
                        render: {
                            fit: 'contain',
                        }
                    },
                    {
                        name: 'info',
                        type: 'text',
                        options: getLocalOptions(3, constraint.local)[1] || {},
                        value: {
                            text: 'info'
                        },
                        render: {
                            size: 18,
                            indent: 36,
                            textAlign: 'center',
                            verticalAlign: 'middle'
                        }
                    },
                ]
            }
        }).filter(Boolean),
        {
            title: "尾页",
            description: "尾页",
            components: [
                {
                    name: 'bg4',
                    type: 'image',
                    options: {
                        width: '100%',
                        height: '100%'
                    },
                    value: {
                        src: 'bg4'
                    },
                    render: {
                        fit: "cover",
                        fitVertical: "top"
                    }
                },
                {
                    name: 'orgName',
                    type: 'text',
                    options: {
                        originAlign: 'center',
                        y: 420,
                        width: '100%',
                        height: 40
                    },
                    value: {
                        text: 'org:name'
                    },
                    render: {
                        size: 34,
                        textAlign: 'center',
                        verticalAlign: 'middle'
                    }
                }
            ]
        }
    ]
}

export const getShaderConfig = (data: Record<string, any>): PtPageJson => {
    const constraintsMap = new Map<string, { title: string; bg: string; local: 1 | 2 }>();

    try {
        const page3 = JSON.parse(data.contentInfo);

        page3.map((item: any) => {
            constraintsMap.set(String(item.rsId), {
                title: item.rsName,
                bg: item.contentBg,
                local: item.contentPosition
            });
        });
    } catch (error: any) {
        console.warn(error.message);
    }

    const pt: PtPageJson = {
        version: 1,
        lastEditTime: '',
        id: Number(data.id),
        title: data.name || '',
        performance: {
            width: 595,
            height: 842
        },
        data: {
            // 公共数据
            org: {
                name: data.orgName
            },

            // 个人数据
            student: {
                name: data.userName,
                className: data.className
            },

            booklet: {
                recordDate: `${data.startRecordTime} - ${data.endRecordTime}`,
            },

            /* 固定数据 */
            base: {
                bg1: data.homeBg,
                bg2: data.collectiveBg,
                bg4: data.endBg,
                avatar: data.avatar || new URL('@/assets/images/avatar_default.png', import.meta.url).toString(),
                classImage: data.url || new URL('@/assets/images/image_default.jpg', import.meta.url).toString(),
                bodys: [
                    ['检查月份', '体重(cm)', '身高(cm)', '头围(cm)', '胸围(cm)', '腰围(cm)', '左眼视力', '右眼视力'],
                    ...((data.bodyStructList || []).concat(new Array(2).fill({})).slice(0, 2).map((item: any) => {
                        return {
                            date: item.recordTime ? dayjs(item.recordTime).format('YYYY年MM月') : '',
                            weight: item.bodyStruct?.weight || '',
                            height: item.bodyStruct?.height || '',
                            t: item.bodyStruct?.headCircus || '',
                            x: item.bodyStruct?.chest || '',
                            y: item.bodyStruct?.abdominal || '',
                            lv: item.bodyStruct?.left || '',
                            rv: item.bodyStruct?.right || ''
                        }
                    })),
                ],
                contents: (data.dailyList || []).map((item: any) => {
                    if (!constraintsMap.has(String(item.scope))) {
                        return false;
                    }

                    const constraint = constraintsMap.get(String(item.scope))!;
                    const photos = (item.pics || []).map((src: string) => {
                        return {
                            type: 'image',
                            src,
                            raw: src
                        };
                    });
                    const videos = (item.mediaPojoList || []).map((video: any) => {
                        return {
                            type: 'video',
                            src: video.cover || new URL('@/assets/images/video_default.jpg', import.meta.url).toString(),
                            raw: video.url
                        }
                    })

                    return {
                        title: constraint.title,
                        bg: constraint.bg,
                        photos: [...photos, ...videos],
                        info: item.content
                    };
                }).filter(Boolean)
            }
        },
        pages: getPages(data, constraintsMap)
    }

    console.log(pt);
    return pt;
}